<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <el-upload
          ref="upload"
          :limit="1"
          accept=".pcm,.wav,.amr,.m4a,.mp3,.mp4"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-change="changeUpload"
          :before-upload="handlebeforeUpload"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :on-error="handleFileError"
          :auto-upload="true"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将语音文件拖到此处，或<em>点击上传</em>
          </div>
          <div class="el-upload__tip txt_center" slot="tip">
            <span
              >仅允许上传<b> pcm/wav/amr/m4a/mp3/mp4格式 </b
              >文件，单次只可上传1个文件</span
            >
          </div>
        </el-upload>
      </div>
      <div class="text item card-wenzi-item">
        <div v-html="message"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "indexasr",
  data() {
    return {
      upload: {
        // 是否显示弹出层（导入）
        open: false,
        // 弹出层标题（导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/power/voice/uploadfiles",
      },
      message: "",
    };
  },
  methods: {
    handlebeforeUpload(file) {
      var flag=false;
      if(file.name!=null&&file.name.indexOf(".pcm")>-1){
        flag=true;
      }
      if(file.name!=null&&file.name.indexOf(".wav")>-1){
        flag=true;
      }
      if(file.name!=null&&file.name.indexOf(".amr")>-1){
        flag=true;
      }
      if(file.name!=null&&file.name.indexOf(".m4a")>-1){
        flag=true;
      }
      if(file.name!=null&&file.name.indexOf(".mp3")>-1){
        flag=true;
      }
      if(file.name!=null&&file.name.indexOf(".mp4")>-1){
        flag=true;
      }
      if (!flag) {
        this.msgInfo("上传文件只能是pcm,wav,amr,m4a,mp3,mp4格式,请重新上传!");
        return false;
      }

      const filesize = file.size / 1024 / 1024;
      if (filesize>100) {
        this.msgInfo('上传的文件大小不能超过100 MB!');
        return false;
      }
      this.message="";
    },
    changeUpload(file, fileList) {
      if (fileList.length > 1 && file.status !== "fail") {
        fileList.splice(0, 1);
      } else if (file.status === "fail") {
        this.msgError("上传失败，请重新上传！");
        fileList.splice(0, 1);
      }
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    handleFileError(event, file, fileList) {},
    handleFileSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.$refs.upload.clearFiles();
        this.message=res.msg;
      } else {
        this.$refs.upload.clearFiles();
        this.msgError(res.msg);
      }
      this.upload.open = false;
      this.upload.isUploading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 105px);
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: center;
  margin-left: -150px;
}

.card-wenzi-item {
  border-radius: 5px;
  border: 1px solid #ddd;
  height: 400px;
  overflow-y: auto;
  padding: 16px;
}
</style>
